/* PhilTower Security Management System - Enhanced CSS
 * Fixes table overflow issues and improves overall styling
 */

:root {
  --ew-theme-red: #dc3545;
  --ew-theme-blue: #0d6efd;
  --ew-theme-yellow: #ffc107;
  --ew-theme-green: #198754;
  --ew-theme-indigo: #6610f2;
  --ew-theme-purple: #6f42c1;
  --ew-theme-pink: #d63384;
  --ew-theme-orange: #fd7e14;
  --ew-theme-teal: #20c997;
  --ew-theme-cyan: #0dcaf0;

  --ew-header-underline-color: #0d6efd;
}

/* ================ HEADER STYLING ================ */
.content-header h1,
h1.ew-page-title {
  font-family: 'Poppins', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.75rem !important;
  color: #2c3e50 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1rem !important;
  display: inline-block !important;
  position: relative !important;
}

.content-header h1::after,
h1.ew-page-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--ew-header-underline-color, #0c6dff);
  margin-top: 0.5rem;
  position: absolute;
  bottom: -8px;
  left: 0;
}

/* Dynamic color themes */
.ew-theme-red .content-header h1::after,
.ew-theme-red h1.ew-page-title::after {
  background-color: var(--ew-theme-red);
}

.ew-theme-blue .content-header h1::after,
.ew-theme-blue h1.ew-page-title::after {
  background-color: var(--ew-theme-blue);
}

/* Additional theme colors */
.ew-theme-yellow .content-header h1::after,
.ew-theme-yellow h1.ew-page-title::after {
  background-color: var(--ew-theme-yellow);
}

.ew-theme-green .content-header h1::after,
.ew-theme-green h1.ew-page-title::after {
  background-color: var(--ew-theme-green);
}

/* ================ FIX TABLE OVERFLOW ISSUES ================ */
/* Enhanced container to fix overflow */
.ew-table-container {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  margin-bottom: 1rem !important;
  border-radius: 0.25rem !important;
  position: relative !important; /* Important for proper scrolling */
}

/* Custom scrollbar styling */
.ew-table-container::-webkit-scrollbar {
  height: 8px !important;
  background-color: #f5f5f5 !important;
}

.ew-table-container::-webkit-scrollbar-thumb {
  background-color: #aaa !important;
  border-radius: 4px !important;
}

.ew-table-container::-webkit-scrollbar-thumb:hover {
  background-color: #888 !important;
}

/* Ensure table expands to full width and doesn't shrink */
.ew-table {
  width: 100% !important;
  table-layout: auto !important; /* Allow table to adjust based on content */
  border-collapse: collapse !important;
  min-width: max-content !important; /* Critical fix: ensure table is never smaller than its content */
  white-space: nowrap !important; /* Keep all content on one line */
}

/* Cell styling */
.ew-table th, 
.ew-table td {
  white-space: nowrap !important; /* Prevent text wrapping */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
  padding: 0.5rem !important;
  min-width: 0 !important; /* Allow cells to shrink if needed */
}

/* ================ GRID PANEL FIXES ================ */
/* Fix for grid panels overflow */
.ew-grid .ew-grid-middle-panel {
  overflow-x: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  scrollbar-width: thin !important;
  position: relative !important;
}

.ew-grid .ew-grid-middle-panel::-webkit-scrollbar {
  height: 8px !important;
  background-color: #f5f5f5 !important;
}

.ew-grid .ew-grid-middle-panel::-webkit-scrollbar-thumb {
  background-color: #aaa !important;
  border-radius: 4px !important;
}

/* Ensure all tables have proper containment */
table {
  max-width: 100% !important;
}

/* Replace default icons with Font Awesome */
.icon-view::before,
.icon-md-view::before,
a[data-name="view"] .ew-icon::before {
  font-family: "Font Awesome 5 Free";
  content: "\f002" !important;
  font-weight: 900;
}

.icon-edit::before,
.icon-md-edit::before,
.icon-inline-edit::before,
a[data-name="edit"] .ew-icon::before {
  font-family: "Font Awesome 5 Free";
  content: "\f304" !important;
  font-weight: 900;
}

.icon-copy::before,
.icon-md-copy::before,
.icon-inline-copy::before,
a[data-name="copy"] .ew-icon::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0c5" !important;
  font-weight: 900;
}

.fa-trash::before,
a[data-name="delete"] .ew-icon::before {
  font-family: "Font Awesome 5 Free";
  content: "\f2ed" !important;
  font-weight: 900;
}

/* Color the actions by function */
a[data-name="view"] .btn,
a[data-name="view"].btn,
a[data-name="view"] .ew-icon {
  color: #0d6efd !important;
}

a[data-name="edit"] .btn,
a[data-name="edit"].btn,
a[data-name="edit"] .ew-icon {
  color: #198754 !important;
}

a[data-name="copy"] .btn,
a[data-name="copy"].btn,
a[data-name="copy"] .ew-icon {
  color: #0dcaf0 !important;
}

a[data-name="delete"] .btn,
a[data-name="delete"].btn,
a[data-name="delete"] .ew-icon {
  color: #dc3545 !important;
}

/* Hover effect */
.ew-list-option-body .btn:hover,
.ew-list-option-body a:hover {
  transform: scale(1.2);
}

/* ================ SEARCH FIELD STYLING ================ */
/* Search input styling */
.ew-basic-search input[type="text"].form-control,
input[type="text"][name^="x_"],
input[type="text"][name^="sv_x_"],
.ew-search-field input[type="text"],
.ew-table-header-filter input[type="text"] {
  min-width: 250px !important;
  width: 300px !important;
}

.ew-extended-search input[type="text"].form-control,
.ew-search-field input[type="text"].form-control,
.ew-desktop-search input[type="text"].form-control {
  min-width: 250px !important;
  width: 300px !important;
}

/* Select form controls */
.ew-basic-search select.form-select,
select.form-select[name^="x_"],
select.form-select[name^="sv_x_"] {
  min-width: 100px !important;
  width: auto !important;
}

/* Search group layout */
.ew-search-group {
  width: auto !important;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ================ RADIO BUTTON FIXES ================ */
/* Fix radio button layout */
.ew-radio-wrapper,
div[id^="dsl_"] .form-check,
div[id^="dsc_"] .form-check,
.table td .form-check,
.ew-radio-list .form-check,
.form-check-input[type="radio"] + label,
.form-check {
  display: inline-flex !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  margin-right: 15px !important;
  white-space: nowrap !important;
}

.form-check-input[type="radio"] {
  margin-right: 5px !important;
  width: 1rem !important;
  height: 1rem !important;
  margin-top: 0.25em !important;
  flex: none !important;
}

.form-check-label {
  white-space: nowrap !important;
  font-weight: normal !important;
  display: inline !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}

.ew-radio-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;
}

/* ================ RESPONSIVE STYLING ================ */
@media (max-width: 768px) {
  /* Header responsive sizing */
  .content-header h1,
  h1.ew-page-title {
    font-size: 1.5rem !important;
  }
  
  /* Full width inputs on mobile */
  .ew-basic-search input[type="text"].form-control,
  input[type="text"][name^="x_"],
  input[type="text"][name^="sv_x_"],
  .ew-search-field input[type="text"],
  .ew-table-header-filter input[type="text"],
  .ew-extended-search input[type="text"].form-control,
  .ew-search-field input[type="text"].form-control,
  .ew-desktop-search input[type="text"].form-control {
    width: 100% !important;
    min-width: 0 !important;
  }
  
  /* Stack search elements */
  .ew-search-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  /* Radio buttons on mobile */
  .ew-radio-list {
    flex-direction: column;
    align-items: flex-start;
  }
}